<template>
  <div class="app-container">
    <HeaderTool @selectDate="selectDate"  @exportExcel="exportExcel"></HeaderTool>
    <!--  卡片  -->
    <el-row :gutter="20">
        <el-col  v-for="(card, index) in cardList" :key="index"
                 class="hover-container"
                 style="perspective: 1000px;
                 position: relative;
                 height: 150px;
                 margin-top: 20px;"
                 :xs="24" :sm="12" :md="12" :lg="6">
         <!--   class="padding-top-bottom-16  front"  此处少添加一个fornt类名,可以正常保持间距        -->
          <el-card  class="padding-top-bottom-16  ">
            <div class="flex justify-content-space-between">
              <div class="title">{{ card.title }}</div>
              <img alt="" class="icon" :src="card.icon">
            </div>
            <div class="count">{{ card.count }}</div>
            <div :class="card.status" class="analyze"> {{ card.analyze }}</div>
          </el-card>
        </el-col>
      </el-row>



    <!--  两列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent  :options="chartOption1" class="charts-common flex-auto">
          <div style="position: absolute;top: -10px;right:0;z-index: 10">
            <el-button :type="selectedButton === 'Weekbtn' ? 'primary' : 'info'" @click="handleButtonClick('Weekbtn')">本周</el-button>
            <el-button :type="selectedButton === 'Monthbtn' ? 'primary' : 'info'" @click="handleButtonClick('Monthbtn')">本月</el-button>
            <el-button :type="selectedButton === 'Yearbtn' ? 'primary' : 'info'" @click="handleButtonClick('Yearbtn')">全年</el-button>
          </div>
        </EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent  :options="chartOption2" class="charts-common flex-auto">
          <div style="position: absolute;top: -10px;right:0;z-index: 10">
            <el-button :type="surgeryButton === 'Weekbtn' ? 'primary' : 'info'" @click="handleSurgeryClick('Weekbtn')">本周</el-button>
            <el-button :type="surgeryButton === 'Monthbtn' ? 'primary' : 'info'" @click="handleSurgeryClick('Monthbtn')">本月</el-button>
            <el-button :type="surgeryButton === 'Yearbtn' ? 'primary' : 'info'" @click="handleSurgeryClick('Yearbtn')">全年</el-button>
          </div>
        </EchartsComponent>
      </el-col>
    </el-row>
    <!--  三列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <div class="charts-common flex-auto flex align-center justify-content-center" style="position: relative;background-color: #FFFFFF;font-weight: bolder;">
          <span style="position: relative;font-size: 54px;color: #3D8BFF;background-color: #FFFFFF;letter-spacing: 2px"> {{dischargeRatio}} %</span>
          <div style="position: absolute;top: 15px;left: 25px;font-size: 20px;color: #464646">出院患者手术占比</div>
        </div>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption3" class="charts-common flex-auto"></EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="8" :lg="8">
        <EchartsComponent :options="chartOption4" class="charts-common flex-auto"></EchartsComponent>
      </el-col>
    </el-row>
    <div style="margin: 20px 0;gap: 20px;" class="data-table-container">
      <el-card class="padding-10">
        <el-row :gutter="20">
          <el-col :xs="9" :sm="17" >
            <div class="sub-title">详细数据列表</div>
          </el-col>
          <el-col :xs="15" :sm="7">
          <div class="flex align-center justify-content-end">
            <el-date-picker    v-model="tableDataPage.date" format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" placeholder="请选择时间" type="daterange"></el-date-picker>
            <el-button type="primary" icon="search" style="margin: 0 10px" @click="getTableDataPageList">搜索</el-button>
          </div>
          </el-col>
        </el-row>
        <el-table :data="tableData"  style="width: 100%;margin-top: 10px;padding-bottom: 20px">
          <el-table-column  align="center" prop="creationTime" label="日期" />
          <el-table-column align="center" prop="patientCount" label="门诊人次" />
          <el-table-column  align="center" prop="hospitalPatientCount" label="出院人次" />
          <el-table-column align="center" prop="dischargePatient" label="手术台次"/>

          <el-table-column align="center" prop="dcRatioCount" label="出院患者手术占比">
            <template #default="scope">
              <span>{{scope.row.dcRatioCount}} %</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="dsuRatioCount" label="日间手术占比">
          <template #default="scope">
            <span>{{scope.row.dsuRatioCount}} %</span>
          </template>
          </el-table-column>

          <el-table-column align="center" prop="misdsuRatioCount" label="微创手术占比">
            <template #default="scope">
              <span>{{scope.row.misdsuRatioCount}} %</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="pduL4SRatioCount" label="四级手术占比">
            <template #default="scope">
              <span>{{scope.row.pduL4SRatioCount}} %</span>
            </template>
          </el-table-column>

        </el-table>
        <div style="position:relative; padding-bottom: 20px">
          <pagination
              :total="tableDataPage.totalCount"
              v-model:page="tableDataPage.pageNumber"
              v-model:limit="tableDataPage.pageSize"
              @pagination="getTableDataPageList" />
        </div>
      </el-card>
    </div>
    <CustomDialog v-model:analyzeDialogVisible="analyzeDialogVisible"></CustomDialog>

  </div>
</template>
<script setup>
import { ref } from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
import HeaderTool from "@/components/HeaderTool/index.vue";
import {
  GetDSURatioInfo,
  getFunctionPatient,
  GetFunctionSurgery,
  getFunDetail,
  GetRatioInfo,
  trend
} from "@/api/quality/feature.js";
import DateUtils from "@/utils/utils.js";
const selectedButton = ref('Yearbtn');
const surgeryButton = ref('Yearbtn');
const analyzeDialogVisible = ref(false);
const dischargeRatio = ref(null); // 出院患者手术占比
// 出院患者手术类型占比时间范围切换
const handleButtonClick = (buttonType) => {
  selectedButton.value = buttonType;
  getFunctionSurgery({btnType:buttonType})
};

//日间手术占择期手术比例
const handleSurgeryClick = (buttonType) => {
  surgeryButton.value = buttonType;
  getDSURatioInfo({btnType:buttonType})
};

// 选择历史时间
const selectDate = (time) => {
  functionPatient({starTime: time[0], endTime: time[1]})
  getRatioInfo({starTime: time[0], endTime: time[1]});
};
// 导出excel文件
const exportExcel = () => {
  console.log("导出excel文件")
  analyzeDialogVisible.value = true;
};
//文件
const loadData = () => {
  console.log("加载数据")
};
const cardList = ref([
  {
    title: '门诊人次数',
    count: 2847,
    icon:new URL('@/assets/static/门诊人次数.png', import.meta.url).href,
    analyze: '较昨日增长2.8 %',
    status: 'increase'
  },
  {
    title: '出院人次数',
    count: 1500,
    icon:new URL('@/assets/static/出院人次数.png', import.meta.url).href,
    analyze: '较昨日持平',
    status: 'fair'
  },
  {
    title: '手术台次数',
    count: 1500,
    icon:new URL('@/assets/static/手术台次数.png', import.meta.url).href,
    analyze: '较昨日持平',
    status: 'fair'
  },
  {
    title: '下转患者',
    count: 1200,
    icon:new URL('@/assets/static/下转患者数.png', import.meta.url).href,
    analyze: '',
    status: 'decrease'
  }
]);



const chartOption1 = ref({
    title: {text: '出院患者手术类型占比'},
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: '10%',
      top: 'middle',
      data: ['常规手术', '日间手术', '微创手术', '四级手术']
    },
    series: [
      {
        name: '手术类型',
        type: 'pie',
        radius: ['40%', '70%'], // 设置内环和外环的半径比例
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {d}%' // 显示标签格式
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: 35, name: '常规手术' },
          { value: 25, name: '日间手术' },
          { value: 20, name: '微创手术' },
          { value: 20, name: '四级手术' }
        ]
      }
    ],
    color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'] // 设置颜色
  });
const chartOption2 = ref({
    legend: {
      top: '0',       // 距离顶部10%
      left: 'center',
      icon: 'circle',      // 图例标记为圆形
      itemWidth: 10,       // 标记宽度
      itemHeight: 10,      // 标记高度
      itemGap: 5,         // 图例项之间的间距（垂直方向）
    },
    title: {text: '日间手术占择期手术比'},
    tooltip: {},
    dataset: {
      dimensions: ['month', '日间手术台次', '择期手术总台次'],
      source: [
        { month: '全年', '日间手术台次': 43.3, '择期手术总台次': 85.8 }
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar',color:'#3D8BFF' }, { type: 'bar',color:'#9CB0D9' }]
  });
const chartOption3 = ref({
    tooltip: {
      trigger: 'item'
    },
    title: {text: '特需医疗服务收入占比'},
    series: [
      {
        type: 'gauge',
        center: ['50%', '70%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        splitNumber: 10,
        itemStyle: {
          color: function (params) {
            // 根据刻度值变色
            if (params.value > 40) {
              return '#FF0000'; // 大于40显示红色
            } else if (params.value > 20) {
              return '#FFA500'; // 大于20显示橙色
            } else {
              return '#999'; // 其他显示灰色
            }
          }
        },
        pointer: {
          show: true, // 添加指针
          length: '50%', // 指针长度
          width: 8 // 指针宽度
        },
        progress: {
          show: true,
          width: 30
        },
        axisLine: {
          lineStyle: {
            width: 30
          }
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: function (params) {
              // 根据刻度值变色
              if (params.value > 40) {
                return '#FF0000'; // 大于40显示红色
              } else if (params.value > 20) {
                return '#FFA500'; // 大于20显示橙色
              } else {
                return '#999'; // 其他显示灰色
              }
            }
          }
        },
        splitLine: {
          distance: -52,
          length: 14,
          color:'red',
          lineStyle: {
            width: 3,
            color: function (params) {
              // 根据刻度值变色
              if (params.value > 40) {
                return '#FF0000'; // 大于40显示红色
              } else if (params.value > 20) {
                return '#FFA500'; // 大于20显示橙色
              } else {
                return '#999'; // 其他显示灰色
              }
            }
          }
        },
        axisLabel: {
          distance: -14,
          fontSize: 20,
          color: "#464646"
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          width: '60%',
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, '30%'],
          fontSize: 20,
          fontWeight: 'bolder',
          formatter: '{value} %',
          color: '#464646'
        },
        data: [{
          value: 15.8
        }
        ]
      }
    ]
  });
const chartOption4 = ref({
    tooltip: {
      trigger: 'item'
    },
    title: {text: '特需医疗服务占比'},
    series: [
      {
        type: 'gauge',
        center: ['50%', '70%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        splitNumber: 10,
        itemStyle: {
          color: function (params) {
            // 根据刻度值变色
            if (params.value > 40) {
              return '#FF0000'; // 大于40显示红色
            } else if (params.value > 20) {
              return '#FFA500'; // 大于20显示橙色
            } else {
              return '#999'; // 其他显示灰色
            }
          }
        },
        pointer: {
          show: true, // 添加指针
          length: '50%', // 指针长度
          width: 8 // 指针宽度
        },
        progress: {
          show: true,
          width: 30
        },
        axisLine: {
          lineStyle: {
            width: 30
          }
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: function (params) {
              // 根据刻度值变色
              if (params.value > 40) {
                return '#FF0000'; // 大于40显示红色
              } else if (params.value > 20) {
                return '#FFA500'; // 大于20显示橙色
              } else {
                return '#999'; // 其他显示灰色
              }
            }
          }
        },
        splitLine: {
          distance: -52,
          length: 14,
          color:'red',
          lineStyle: {
            width: 3,
            color: function (params) {
              // 根据刻度值变色
              if (params.value > 40) {
                return '#FF0000'; // 大于40显示红色
              } else if (params.value > 20) {
                return '#FFA500'; // 大于20显示橙色
              } else {
                return '#999'; // 其他显示灰色
              }
            }
          }
        },
        axisLabel: {
          distance: -14,
          fontSize: 20,
          color: "#464646"
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          width: '60%',
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, '30%'],
          fontSize: 20,
          fontWeight: 'bolder',
          formatter: '{value} %',
          color: '#464646'
        },
        data: [
          {
            value: 50.5
          }
        ]
      },

    ]
  });

const tableData = ref([
  {
    date: '2024-01-18',
    outpatientVisits: 2847,
    dischargedPatients: 436,
    surgeries: 189,
    minimallyInvasiveSurgeries: '68.5%',
    level4Surgeries: '12.3%'
  },
  {
    date: '2024-01-17',
    outpatientVisits: 2623,
    dischargedPatients: 446,
    surgeries: 180,
    minimallyInvasiveSurgeries: '65.8%',
    level4Surgeries: '11.9%'
  },
  {
    date: '2024-01-16',
    outpatientVisits: 2789,
    dischargedPatients: 428,
    surgeries: 175,
    minimallyInvasiveSurgeries: '67.2%',
    level4Surgeries: '12.1%'
  }
]);
// 肿瘤专业医疗质量控制指标
const tableDataPage = ref(
    {
      date: [
        DateUtils.formatDate(DateUtils.getDateByDays(-30),"yyyy-MM-dd"),
        DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd")
      ], //时间
      pageNumber: 1, // 当前页
      totalCount:0,
      pageSize:10,
      totalPages:0
    });

// 获取肿瘤专业医疗质量控制指标列表
const getTableDataPageList = () => {
  let starTime = "";
  let endTime = "";
  if (Array.isArray(tableDataPage.value.date)&&tableDataPage.value.date.length >0){
     starTime = tableDataPage.value.date[0];
     endTime = tableDataPage.value.date[1];
  }else {
     starTime = "";
     endTime =  "";
  }
  getFunctionDetail({starTime, endTime, pageNumber:tableDataPage.value.pageNumber})
};
// 获取四个小卡片的数据
const functionPatient = async (params) => {
  let result = await getFunctionPatient(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    cardList.value[0].count = data.patientCount;
    cardList.value[0].analyze = data.patientRatio > 0 ? `较昨日增长${data.patientRatio} %` : data.patientRatio < 0 ? `较昨日下降${data.patientRatio} %` : '较昨日持平';
    cardList.value[0].status = data.patientRatio > 0 ? 'increase' : data.patientRatio < 0 ? 'decrease' : 'fair';

    cardList.value[1].count = data.hospitalPatientCount;
    cardList.value[1].analyze = data.hospitalRatio > 0 ? `较昨日增长${data.hospitalRatio} %` : data.hospitalRatio < 0 ? `较昨日下降${data.hospitalRatio} %` : '较昨日持平';
    cardList.value[1].status = data.hospitalRatio > 0 ? 'increase' : data.hospitalRatio < 0 ? 'decrease' : 'fair';

    cardList.value[2].count = data.dischargePatient;
    cardList.value[2].analyze = data.dischargeRatio > 0 ? `较昨日增长${data.dischargeRatio} %` : data.dischargeRatio < 0 ? `较昨日下降${data.dischargeRatio} %` : '较昨日持平';
    cardList.value[2].status = data.dischargeRatio > 0 ? 'increase' : data.dischargeRatio < 0 ? 'decrease' : 'fair';

    cardList.value[3].count = data.drVisitsCount;
    cardList.value[3].analyze = data.drVisitsRatio > 0 ? `较昨日增长${data.drVisitsRatio} %` : data.drVisitsRatio < 0 ? `较昨日下降${data.drVisitsRatio} %` : '较昨日持平';
    cardList.value[3].status = data.drVisitsRatio > 0 ? 'increase' : data.drVisitsRatio < 0 ? 'decrease' : 'fair';
  }
}
const getFunctionSurgery = async (btnType) => {
  let result = await GetFunctionSurgery(btnType);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
     chartOption1.value.series[0].data = [
      { value: data.dcCount, name: '常规手术' },
      { value: data.dsuCount, name: '日间手术' },
      { value: data.misdsuCount, name: '微创手术' },
      { value: data.pduL4SCount, name: '四级手术' }
    ]
  }
}
const getDSURatioInfo = async (params) => {
  let result = await GetDSURatioInfo(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    let source = [];
    let xData = "";
    if (surgeryButton.value == "Weekbtn"){
       xData = "本周"
    }
    if (surgeryButton.value == "Monthbtn"){
      xData = "本月"
    }
    if (surgeryButton.value == "Yearbtn"){
      xData = "本年"
    }
    source.push({
      month:xData,
      '日间手术台次':data.dsuCount,
      '择期手术总台次':data.pduCount
    })
    chartOption2.value.dataset = JSON.parse(JSON.stringify({
      dimensions: ['month', '日间手术台次', '择期手术总台次'],
      source
    }));
  }
}
const getRatioInfo = async (params) => {
  let result = await GetRatioInfo(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    chartOption3.value.series[0].data[0].value = data.specialMedRevenueRatio ?data.specialMedRevenueRatio:0;
    chartOption4.value.series[0].data[0].value = data.specialMedRatio ?data.specialMedRatio:0;
    dischargeRatio.value = data.dischargeRatio?data.dischargeRatio:0;
  }
}
// 获取列表参数
const getFunctionDetail = async (params) => {
  let result = await getFunDetail(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
     const {items,totalCount,pageNumber,pageSize,totalPages } = data;
     tableData.value = items;
     tableDataPage.value.pageNumber = pageNumber;
     tableDataPage.value.totalCount = totalCount;
  }
}

// 加载界面所有数据
const getAllData = (time)=>{
     functionPatient(time)
     getFunctionSurgery({btnType:selectedButton.value})
     getDSURatioInfo({btnType:surgeryButton.value})
     getRatioInfo(time);
     getFunctionDetail({starTime:tableDataPage.value.date[0], endTime:tableDataPage.value.date[1], pageNumber:tableDataPage.value.pageNumber})
}

getAllData({
  starTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd"),
  endTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd")
});






</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 26px;
    font-weight: 600;
    padding: 14px 0;
  }
  .analyze {
    font-size: 16px;
  }
  .increase {
    color: #00C94F;
  }
  .decrease {
    color: #FF3643;
  }
  .fair {
    color: #8F95A1;
  }
  .charts-common {
    height: 300px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
  .data-table-container {
     .sub-title{
        color: #464646;
        font-size: 20px;
        margin: 10px 0;
        font-weight: bolder;
     }
  }
}
.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 隐藏元素背面 */
  transition: transform 0.9s ease; /* 添加过渡效果，时长 0.6 秒，缓动函数为 ease */
}
.front {
  z-index: 2;
}
.back {
  transform: rotateY(180deg); /* 初始时背面旋转 180 度隐藏 */
}
.hover-container:hover .front {
  transform: rotateY(180deg); /* 鼠标悬浮时正面旋转 180 度隐藏 */
}
.hover-container:hover .back {
  transform: rotateY(0deg); /* 鼠标悬浮时背面旋转到 0 度显示 */
}
::v-deep(.charts-common .el-button) {
  height: fit-content;
  padding:5px;
}



</style>
